<template>
  <div>
    <div class="header">员工考察登记表</div>
    <el-form
      ref="entryApplyForm"
      v-loading="loading"
      :model="entryApplyForm"
      :rules="entryApplyRules"
      :disabled="formDisabled"
      label-width="0px"
    >
      <div class="entryTableHeader">
        <table style="width: 90%;">
          <tr>
            <td width="30%" class="departwrapper">
              <el-form-item label="部门" required prop="entry_dep_id" label-width="100px">
                <TreeSelect
                  ref="depTreeSelect"
                  v-model="entryApplyForm.entry_dep_id"
                  :data="departmentList"
                  :height="400"
                  :popover-width="300"
                  default-expand-all
                  :default-props="{
                    children: 'children',
                    label: 'name',
                  }"
                  :disabled="formDisabled"
                  node-key="id"
                  @change="deptChange"
                />
              </el-form-item>
            </td>
            <td width="30%" class="postwrapper">
              <el-form-item label="岗位" prop="entry_job" required label-width="100px">
                <el-input
                  v-model="entryApplyForm.entry_job"
                  placeholder="请输入岗位"
                />
              </el-form-item>
            </td>
            <td width="10%" style="text-align: right;">填表日期：</td>
            <td width="10%">{{ entryApplyForm.created_at | formatDate }}</td>
          </tr>
        </table>
      </div>
      <table class="entryTable">
        <tr class="firstTr">
          <td width="10%" class="firstTd required title">姓名</td>
          <td width="12%">
            <el-form-item prop="name">
              <el-input v-model="entryApplyForm.name" placeholder="请输入姓名"/>
            </el-form-item>
          </td>
          <td width="10%" class="required title">性别</td>
          <td width="12%">
            <el-form-item prop="sex">
              <el-radio-group v-model="entryApplyForm.sex">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
          <td width="10%" class="required title">出生日期</td>
          <td width="12%">
            <el-form-item prop="birth">
              <el-date-picker
                v-model="entryApplyForm.birth"
                clearable
                type="date"
                placeholder="选择出生日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width:100%"
              />
            </el-form-item>
          </td>
          <td width="10%" class="title" v-html="'&emsp;政治面貌'"/>
          <td width="12%">
            <el-form-item prop="political_landspace">
              <el-select
                v-model="entryApplyForm.political_landspace"
                filterable
                clearable
                placeholder="请选择政治面貌"
                style="width:100%"
              >
                <el-option v-for="item in politicalList" :key="item.code" :label="item.name" :value="item.name">
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td rowspan="4">
            <el-form-item prop="avatar">
              照片
              <upload-image
                style="margin-left:30px;"
                :cur-image-prop="entryApplyForm.avatar"
                :lt-size-prop="2"
                has-del-btn
                @upload-success="handleUploadImageSuccess"
                @upload-remove="handleUploadImageRemove"
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd required title">籍贯</td>
          <td>
            <el-form-item prop="native_place">
              <el-input v-model="entryApplyForm.native_place" placeholder="请输入籍贯"/>
            </el-form-item>
          </td>
          <td class="required title">民族</td>
          <td>
            <el-form-item prop="national">
              <el-select
                v-model="entryApplyForm.national"
                filterable
                clearable
                placeholder="请选择民族"
                style="width:100%"
              >
                <el-option v-for="item in nationalList" :key="item.code" :label="item.name" :value="item.name">
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td v-html="'&emsp;婚姻情况'" class="title"/>
          <td>
            <el-form-item>
              <el-select
                v-model="entryApplyForm.marriage"
                filterable
                clearable
                placeholder="请选择婚姻情况"
                style="width:100%"
              >
                <el-option v-for="item in marriageList" :key="item.code" :label="item.name" :value="item.name">
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </td>
          <td class="required title">文化程度</td>
          <td>
            <el-form-item prop="degree">
              <el-select
                v-model="entryApplyForm.degree"
                filterable
                clearable
                placeholder="请选择文化程度"
                style="width:100%"
              >
                <el-option v-for="item in degreeList" :key="item.code" :label="item.name" :value="item.name">
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd required title">身份证号码</td>
          <td colspan="4">
            <el-form-item prop="id_no">
              <el-input v-model="entryApplyForm.id_no" placeholder="请输入身份证号码" @input="idNoInput"/>
            </el-form-item>
          </td>
          <td class="required title">联系电话</td>
          <td colspan="2">
            <el-form-item prop="mobile">
              <el-input v-model="entryApplyForm.mobile" placeholder="请输入联系电话"/>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd required title">户籍所在地</td>
          <td colspan="4">
            <el-form-item prop="household_registration">
              <el-input v-model="entryApplyForm.household_registration" placeholder="请输入户籍所在地"/>
            </el-form-item>
          </td>
          <td class="title">紧急联系人电话</td>
          <td colspan="2">
            <el-form-item prop="urgent_phone">
              <el-input v-model="entryApplyForm.urgent_phone" placeholder="请输入紧急联系人电话"/>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd required title">现居住地址</td>
          <td colspan="4">
            <el-form-item prop="home_address">
              <el-input v-model="entryApplyForm.home_address" placeholder="请输入现居住地址"/>
            </el-form-item>
          </td>
          <td class="title">QQ号码</td>
          <td colspan="3">
            <el-form-item prop="qq">
              <el-input v-model="entryApplyForm.qq" placeholder="请输入QQ号码"/>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td
            class="firstTd title"
            :rowspan="[entryApplyForm.work_experiences != null?entryApplyForm.work_experiences.length+1:1]"
          >
            工作经验
          </td>
          <td colspan="2" class="title">
            起止年月
          </td>
          <td colspan="2" class="title">
            工作单位
          </td>
          <td colspan="2" class="title">
            职位
          </td>
          <td colspan="2" class="title">
            离职原因
          </td>
          <i
            v-show="(entryApplyForm.flow_status == null || entryApplyForm.flow_status ==0 || entryApplyForm.flow_status==2) && (entryApplyForm.work_experiences == null || entryApplyForm.work_experiences.length<5)"
            class="el-icon-circle-plus-outline"
            style="position:absolute;margin-left:10px;margin-top:20px;font-size:25px;color:rgb(64, 158, 255)"
            @click="workExperienceAdd()"
          />
        </tr>
        <tr v-for="(item,index) in entryApplyForm.work_experiences">
          <td colspan="2">
            <el-form-item>
              <el-date-picker
                v-model="item.work_date"
                type="daterange"
                range-separator="—"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="(value) => work_experience_date_change(value,index)"
              />
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              <el-input
                v-model="item.company"
                placeholder="请输入工作单位"
              />
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              <el-input
                v-model="item.job"
                placeholder="请输入职位"
              />
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              <el-input
                v-model="item.leave_reason"
                placeholder="请输入离职原因"
              />
            </el-form-item>
          </td>
          <i
            v-show="entryApplyForm.flow_status == null|| entryApplyForm.flow_status==0 || entryApplyForm.flow_status==2"
            class="el-icon-remove-outline"
            style="position:absolute;margin-left:10px;margin-top:20px;font-size:25px;color:red;"
            @click="workExperienceRemove(index)"
          />
        </tr>
        <tr>
          <td class="firstTd title"
              :rowspan="[entryApplyForm.family_members != null?entryApplyForm.family_members.length+1:1]"
          >
            家族成员
          </td>
          <td colspan="2" class="title">
            姓名
          </td>
          <td colspan="2" class="title">
            工作单位
          </td>
          <td colspan="2" class="title">
            职务
          </td>
          <td colspan="2" class="title">
            电话
          </td>
          <i
            v-show="(entryApplyForm.flow_status == null|| entryApplyForm.flow_status==0 || entryApplyForm.flow_status==2) && (entryApplyForm.family_members==null || entryApplyForm.family_members.length <5)"
            class="el-icon-circle-plus-outline"
            style="position:absolute;margin-left:10px;margin-top:20px;font-size:25px;color:rgb(64, 158, 255)"
            @click="familyMemberAdd()"
          />
        </tr>
        <tr v-if="entryApplyForm.family_members.length" v-for="(item,index) in entryApplyForm.family_members">
          <td colspan="2">
            <el-form-item>
              <el-input v-model="item.name" placeholder="请输入姓名"/>
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              <el-input v-model="item.company" placeholder="请输入工作单位"/>
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              <el-input v-model="item.job" placeholder="请输入职务"/>
            </el-form-item>
          </td>
          <td colspan="2">
            <el-form-item>
              <el-input v-model="item.mobile" placeholder="请输入电话"/>
            </el-form-item>
          </td>
          <i
            v-show="entryApplyForm.flow_status == null || entryApplyForm.flow_status==0 || entryApplyForm.flow_status==2"
            class="el-icon-remove-outline"
            style="position:absolute;margin-left:10px;margin-top:20px;font-size:25px;color:red"
            @click="familyMemberRemove(index)"
          />
        </tr>
        <tr v-if="entryApplyForm.family_members.length===0">
          <td colspan="8">未填写</td>
        </tr>
        <tr>
          <td class="firstTd title">
            能否接受工作调动
          </td>
          <td colspan="2">
            <el-form-item prop="dispatch">
              <el-radio-group v-model="entryApplyForm.dispatch">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
          <td class="title">
            能否加班
          </td>
          <td colspan="2">
            <el-form-item prop="work_overtime">
              <el-radio-group v-model="entryApplyForm.work_overtime">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
          <td class="title">
            能否出差
          </td>
          <td colspan="2">
            <el-form-item prop="business_trip">
              <el-radio-group v-model="entryApplyForm.business_trip">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title" colspan="2">
            是否曾在我公司应聘
          </td>
          <td colspan="2">
            <el-form-item prop="employed">
              <el-radio-group v-model="entryApplyForm.employed">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
          <td colspan="3" class="title">
            是否有亲属或朋友在我司工作
          </td>
          <td colspan="3">
            <el-form-item prop="employed_friends">
              <el-radio-group v-model="entryApplyForm.employed_friends">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
              <el-input
                v-if="entryApplyForm.employed_friends"
                v-model="entryApplyForm.employed_relatives_friends_name"
                placeholder="请输入姓名"
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            填表人申明
          </td>
          <td colspan="8" style="text-align:left;">
            <div>1、本人保证所填写资料属实</div>
            <div>2、保证遵守公司各项规章制度</div>
            <div>3、若有不实之处，本人愿意无条件接受公司处罚甚至辞退，并不要求任何补助。</div>
            <div class="sign">申&nbsp;明&nbsp;人：</div>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            入职培训
          </td>
          <td colspan="8" style="text-align:left">
            <div>本人已接受公司岗前及员工规章制度的培训。</div>
            <div class="sign">
              <span>员工签字：</span> <span style="margin-left:150px;"/>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="9" class="firstTd">
            <span style="font-size:20px;font-weight:bold">以下为公司填写</span>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">
            入编时间
          </td>
          <td colspan="2">
            <el-form-item>
              <el-date-picker
                v-model="entryApplyForm.comp_fill_entry_date"
                type="date"
                placeholder="选择入编时间"
                style="width:100%"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </td>
          <td class="title">
            所属部门
          </td>
          <td colspan="2">
            {{ entryApplyForm.comp_fill_belong_dep }}
          </td>
          <td class="title">
            职务
          </td>
          <td colspan="2">
            {{ entryApplyForm.comp_fill_job }}
          </td>
        </tr>
        <tr>
          <td class="firstTd required title">
            考察期
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_probation">
              <el-date-picker
                v-model="entryApplyForm.comp_fill_probation"
                type="daterange"
                range-separator="—"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="comp_fill_probation_change"
              />
            </el-form-item>
          </td>
          <td class="required title">
            考察期工资
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_probation_salary">
              <el-input v-model="entryApplyForm.comp_fill_probation_salary" placeholder="请输入考察期工资">
                <template slot="prepend">&yen;</template>
              </el-input>
            </el-form-item>
          </td>
          <td class="required title">
            入编后工资
          </td>
          <td colspan="2">
            <el-form-item prop="comp_fill_salary">
              <el-input v-model="entryApplyForm.comp_fill_salary" placeholder="请输入入编后工资">
                <template slot="prepend">&yen;</template>
              </el-input>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>
    <div style="text-align: center;margin-bottom: 30px">
      <FlowBtnRow :flow-status="entryApplyForm.flow_status" :can-check="entryApplyForm.can_check"
                  :is-applyer="entryApplyForm.is_applyer" :is-new-data="entryApplyForm.isNewData"
                  form-name="entryApplyForm"
                  @save="onSave" @submit="onSubmit" @returnBack="onReturnBack" @pass="onPass" @delete="onDelete"
                  @actualDelete="onActualDelete" :flowType="5"
                  :dataId="(params || {}).id || ((params || {}).handle_param || {}).id"
      />
    </div>
  </div>
</template>

<script>
import { formatDateByFmt } from '@/utils/util.js'
import { list_all3rd_bycode } from '@/api/business/setting/dict.js'
import UploadImage from '@/components/UploadImage'
import TreeSelect from '@/components/TreeSelect'
import {
  actualDeleteData,
  deleteData,
  getDetail as getEntryApplyDetails,
  pass as passData,
  returnBack as returnBackData,
  save as saveData
} from '@/api/personnel/entry_apply.js'
import { Message } from 'element-ui'
import { saveAndBegin } from '@/api/personnel/entry_apply'
import { list as getDepartmentList } from '@/api/system/department.js'
import FlowBtnRow from '@/components/FlowBtnRow'
import { verifyMobile as verifyMobileFunction } from '@/api/personnel/org/roster'

const id_reg = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

export default {

  components: {
    UploadImage,
    TreeSelect,
    FlowBtnRow
  },
  filters: {
    formatDate(time) {
      if (time) {
        return formatDateByFmt(time, 'yyyy年MM月dd日')
      }
    }
  },
  computed: {
    formDisabled() {
      return this.entryApplyForm.flow_status == 3 || this.entryApplyForm.flow_status == 4
    }
  },
  data() {
    var checkNo = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('身份证号码为空'))
      }
      if (!id_reg.test(value)) {
        return callback(new Error('身份证号码格式不正确'))
      } else {
        return callback()
      }
    }
    return {
      loading: false,
      politicalList: [],
      nationalList: [],
      marriageList: [],
      degreeList: [],
      departmentList: [],
      // 政治面貌 param
      politicalParam: {
        code: 'ryxg-zzmm'
      },
      // 民族 param
      nationalParam: {
        code: 'ryxg-mz'
      },
      // 婚姻状况 param
      marriageParam: {
        code: 'ryxg-hyqk'
      },
      // 文化程度 param
      degreeParam: {
        code: 'ryxg-whcd'
      },
      entryApplyForm: {
        flow_status: 0,
        can_check: false,
        is_applyer: true,
        isNewData: true,
        entry_dep_id: 0,
        entry_job: null,
        created_at: new Date(),
        name: null,
        sex: '男',
        birth: null,
        avatar: null,
        political_landspace: null,
        native_place: null,
        national: '汉族',
        marriage: null,
        degree: null,
        id_no: null,
        mobile: null,
        household_registration: null,
        urgent_phone: null,
        home_address: null,
        work_experiences: [{
          company: null,
          work_date: null,
          start_time: null,
          end_time: null,
          job: null,
          leave_reason: null
        }],
        family_members: [{
          company: null,
          job: null,
          mobile: null,
          name: null
        }],
        dispatch: null,
        work_overtime: null,
        business_trip: null,
        employed: null,
        employed_friends: null,
        employed_relatives_friends_name: null,
        comp_fill_entry_date: null,
        comp_fill_belong_dep_id: null,
        comp_fill_belong_dep: null,
        comp_fill_job: null,
        comp_fill_probation: null,
        comp_fill_probation_salary: null,
        comp_fill_salary: null
      },
      entryApplyRules: {
        entry_dep_id: [
          { required: true, message: '请选择部门', trigger: ['change'] }
        ],
        entry_job: [
          { required: true, message: '请填写岗位信息', trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: ['blur', 'change'] }
        ],
        birth: [
          { required: true, message: '请选择生日', trigger: ['blur', 'change'] }
        ],
        native_place: [
          { required: true, message: '请输入籍贯', trigger: ['blur', 'change'] }
        ],
        national: [
          { required: true, message: '请选择民族', trigger: ['blur', 'change'] }
        ],
        degree: [
          { required: true, message: '请选择文化程度', trigger: ['blur', 'change'] }
        ],
        id_no: [
          { required: true, message: '请输入身份证号', trigger: ['blur', 'change'] },
          { validator: checkNo, trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: ['blur', 'change'] }
        ],
        household_registration: [
          { required: true, message: '请输入户籍所在地', trigger: ['blur', 'change'] }
        ],
        home_address: [
          { required: true, message: '请输入现居住地址', trigger: ['blur', 'change'] }
        ],
        comp_fill_probation: [
          { required: true, message: '请选择考察期', trigger: ['blur', 'change'] }
        ],
        comp_fill_probation_salary: [
          { required: true, message: '请输入考察期工资', trigger: ['blur', 'change'] }
        ],
        comp_fill_salary: [
          { required: true, message: '请输入入编后工资', trigger: ['blur', 'change'] }
        ]
      },
      params: {}
    }
  },
  watch: {
    'entryApplyForm.entry_job'(val) {
      this.entryApplyForm.comp_fill_job = val
    }
  },
  created() {
    this.getPoliticalList()
    this.getNationalList()
    this.getMarriageList()
    this.getDegreeList()
    this.getDepartmentList()
  },
  mounted() {
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)
    this.params = params
    if (params.id || (params.handle_param && params.handle_param.id)) {
      this.getDetails(params.id || params.handle_param.id)
    } else {
      this.$nextTick(() => {
        // 解决新增时候,页面一加载,部门id总是有验证不通过问题的情况
        this.entryApplyForm.entry_dep_id = null
      })
    }
  },
  methods: {
    getDetails(id) {
      this.loading = true
      return getEntryApplyDetails(id)
        .then(res => {
          if (res.data) {
            if (res.data.comp_fill_probation_start && res.data.comp_fill_probation_end) {
              res.data.comp_fill_probation = [res.data.comp_fill_probation_start, res.data.comp_fill_probation_end]
            }
            if (res.data.work_experiences) {
              res.data.work_experiences.forEach((item) => {
                if (item.start_time == null || item.end_time == null) {
                  item.work_date = []
                } else {
                  item.work_date = [item.start_time, item.end_time]
                }
              })
            }
            this.entryApplyForm = Object.assign({}, this.entryApplyForm, res.data)
            this.entryApplyForm.isNewData = false
            this.$refs['depTreeSelect'].checkSelectedNode([this.entryApplyForm.entry_dep_id])
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取政治面貌
    getPoliticalList() {
      return list_all3rd_bycode(this.politicalParam)
        .then(res => {
          this.politicalList = res.data
        })
    },
    // 获取民族
    getNationalList() {
      return list_all3rd_bycode(this.nationalParam)
        .then(res => {
          this.nationalList = res.data
          if (this.nationalList != null && this.nationalList.length > 0 && this.entryApplyForm.national == null) {
            this.entryApplyForm.national = this.nationalList[0].id
          }
        })
    },
    // 获取婚姻情况
    getMarriageList() {
      return list_all3rd_bycode(this.marriageParam)
        .then(res => {
          this.marriageList = res.data
        })
    },
    // 获取文化程度
    getDegreeList() {
      return list_all3rd_bycode(this.degreeParam)
        .then(res => {
          this.degreeList = res.data
        })
    },
    // 获取部门信息
    getDepartmentList() {
      return getDepartmentList().then(res => {
        this.departmentList = res.data
      })
    },
    work_experience_date_change(val, index) {
      const startTime = formatDateByFmt(val[0], 'yyyy-MM-dd')
      const endTime = formatDateByFmt(val[1], 'yyyy-MM-dd')
      this.entryApplyForm.work_experiences[index].start_time = startTime
      this.entryApplyForm.work_experiences[index].end_time = endTime
    },
    familyMemberAdd() {
      if (this.entryApplyForm.family_members.length > 4) {
        return
      }
      this.entryApplyForm.family_members.push({
        company: null,
        job: null,
        mobile: null,
        name: null
      })
    },
    familyMemberRemove(index) {
      this.entryApplyForm.family_members.splice(index, 1)
    },
    workExperienceAdd() {
      if (this.entryApplyForm.work_experiences.length > 4) {
        return
      }
      this.entryApplyForm.work_experiences.push({
        company: null,
        work_date: null,
        start_time: null,
        end_time: null,
        job: null,
        leave_reason: null
      })
    },
    workExperienceRemove(index) {
      this.entryApplyForm.work_experiences.splice(index, 1)
    },
    comp_fill_probation_change(val) {
      this.entryApplyForm.comp_fill_probation_start = formatDateByFmt(val[0], 'yyyy-MM-dd')
      this.entryApplyForm.comp_fill_probation_end = formatDateByFmt(val[1], 'yyyy-MM-dd')
    },
    // 图片上传成功回调方法
    handleUploadImageSuccess(url) {
      this.entryApplyForm.avatar = url
    },
    handleUploadImageRemove() {
      this.entryApplyForm.avatar = null
    },
    deptChange(deptId, node) {
      this.entryApplyForm.comp_fill_belong_dep = node.label
      this.entryApplyForm.comp_fill_belong_dep_id = deptId
    },
    // 保存
    onSave() {
      this.$refs.entryApplyForm.validate(valid => {
        if (valid) {
          var obj = Object.assign({}, this.entryApplyForm)
          // 显示loading
          this.loading = true
          delete obj.created_at

          this.save(obj)
        } else {
          // ~ 不通过
          return false
        }
      })
    },
    // 保存数据
    save(obj) {
      saveData(obj).then(res => {
        const {
          code,
          message
        } = res
        if (code === 200) {
          Message({
            message,
            type: 'success',
            duration: 1000
          })
          this.detail()
        }
        this.loading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    // 提交
    onSubmit() {
      // 表单校验
      this.$refs.entryApplyForm.validate(valid => {
        var obj = Object.assign({}, this.entryApplyForm)
        // 显示loading
        this.loading = true

        delete obj.created_at
        this.submit(obj)
      })
    },
    // 提交数据
    submit(obj) {
      saveAndBegin(obj)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onPass(opinion) {
      this.loading = true
      passData({ id: this.entryApplyForm.id, wf_check_opinion: opinion })
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onReturnBack(opinion) {
      this.loading = true
      returnBackData({ id: this.entryApplyForm.id, wf_check_opinion: opinion })
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onActualDelete() {
      this.loading = true
      actualDeleteData(this.entryApplyForm.id)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onDelete() {
      this.loading = true
      deleteData(this.entryApplyForm.id)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    idNoInput(value) {
      if (this.checkIdNo(value)) {
        let s = (value + '').substring(6, 14)
        s = this.insertStr(s, 4, '-')
        s = this.insertStr(s, 7, '-')
        this.entryApplyForm.birth = s
      }
    },
    insertStr(source, start, newStr) {
      return source.slice(0, start) + newStr + source.slice(start)
    },
    checkIdNo(value) {
      // const id_reg = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (value) {
        return id_reg.test(value + '')
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">

.entryTableHeader {
  width: 90%;
  height: 50px;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.entryTable {
  width: 90%;
  font-size: 14px;
  margin: 0 auto 30px auto;
}

.entryTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 20px auto;
}

.tip {
  color: red;
}

.textarea-box {
  padding: 10px !important;
}

.follow_table {
  margin-top: 20px;
}

.button_group {
  margin: 20px auto;
  text-align: center;
}

.no_last {
  padding-top: 37px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

.error_box {
  margin-bottom: 22px;
}

.button_box {
  text-align: center;
  margin-top: -10px;
  padding-bottom: 10px;
}

/deep/ .el-dialog__title {
  font-size: 14px;
}

.sign {
  float: right;
  width: 400px;
  text-align: left;
}

.departwrapper /deep/ .el-input__inner,
.postwrapper /deep/ .el-input__inner {
  border: none;
}

.departwrapper /deep/ .el-form-item__label,
.postwrapper /deep/ .el-form-item__label {
  margin-top: 3px;
  color: #000;
}

.required:before {
  content: "*";
  color: #F56C6C;
  margin-right: 4px;
}

.title {
  background: #F5F7FA;
  font-weight: bold;
}

/deep/ .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: black;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #409EFF;
  background: #409EFF
}

/deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #FFF;
}

///deep/ .el-input__inner{
//  border: none;
//}
</style>
